<script setup>
// 引入three.js
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 引入 GUI
// import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 引入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'



// 创建三维场景
const scene = new THREE.Scene()
// 创建透视相机
const camera = new THREE.PerspectiveCamera(
  75, // 视野参数
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 近截面
  1000 // 远截面
)
// 设置相机视角（默认x、y、z 均为 0）
camera.position.set(2, 2, 3)


// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器尺寸（一般为全屏）
renderer.setSize(window.innerWidth, window.innerHeight)
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement)


// 创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建球体，用于hdr环境贴图的附着
const planeMaterial = new THREE.PlaneGeometry(1, 1)

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader()
// 加载纹理
const texture = textureLoader.load('图片路径--.png')
// 加载 AO 贴图
const aoMap = textureLoader.load('图片路径--.jpg')
// 加载透明度贴图
const alphaMap = textureLoader.load('图片路径--.jpg')
// 加载光照贴图
const lightMap = textureLoader.load('图片路径--.jpg')
// 加载高光贴图
const specularMap = textureLoader.load('图片路径--.jpg')
// 加载hdr贴图
const rgbeloader = new RGBELoader()
rgbeloader.load('hdr图片路径', (envMap) => {
  // 设置球形贴图
  envMap.mapping = THREE.EquirectangularReflectionMapping
  // 设置环境贴图
  scene.background = envMap
  // 设置环境贴图
  scene.environment = envMap
  // 设置plane环境贴图
  planeMaterial.envMap = envMap

})

// 设置几何体的材质和颜色
const material = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  map: texture, // 纹理
  transparent: true, // 允许透明
  aoMap: aoMap, // ao贴图
  aoMapIntensity: 1,
  alphaMap: alphaMap, // 透明度贴图
  lightMap: lightMap, // 光照贴图
  specularMap: specularMap, // 高光贴图
  reflectivity: 0.5 // 反射程度
})
// 上面是在创建的时候定义，也可以用属性的方式去赋予材质贴图
// material.map = texture
// 创建物体 =（几何体 + 材质）
const cube = new THREE.Mesh(geometry, material)
// 将三维物体添加到场景中
scene.add(cube)





// 添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5)
// 将坐标辅助器添加到场景中
scene.add(axesHelper)


// 创建轨道控制器 (相机，用于事件监听的HTML元素)
const controls = new OrbitControls(camera, renderer.domElement)
// 开启阻尼效果
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05



// 创建动画循环函数
function animate() {
  requestAnimationFrame(animate)
  // cube.rotation.x += 0.01
  // cube.rotation.y += 0.01
  controls.update()
  renderer.render(scene, camera)
}
// 调用动画循环，让物体旋转起来
animate()


// 设置画布自适应屏幕大小
window.addEventListener('resize', () => {
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix()
})


// // 创建GUI
// const gui = new GUI()

// // 封装触发事件
// const eventObj = {
//   Fullscreen: () => {
//     // 进入全屏
//     document.body.requestFullscreen()
//   },
//   ExitFullscreen: () => {
//     // 退出全屏
//     document.exitFullscreen()
//   }
// }

// // 1、按钮类型
// gui.add(eventObj, 'Fullscreen').name('全屏')
// gui.add(eventObj, 'ExitFullscreen').name('退出全屏')

// // 2、下拉框类型
// const folder = gui.addFolder('位置')
// folder
//   .add(cube.position, 'x')
//   .min(-10)
//   .max(10)
//   .step(1)
//   .name('X轴')
//   // onChange是实时返回改变的值
//   .onChange((val) => {
//     console.log(val)
//   })
// folder
//   .add(cube.position, 'y')
//   .min(-10)
//   .max(10)
//   .step(1)
//   .name('Y轴')
//   // 这个是改变完后再返回值
//   .onFinishChange((val) => {
//     console.log(val)
//   })
// folder
//   .add(cube.position, 'z')
//   .min(-10)
//   .max(10)
//   .step(1)
//   .name('Z轴')

// // 3、复选框类型
// parentMaterial.wireframe = false
// gui
//   .add(parentMaterial, 'wireframe')
//   .name('线框模式')

// // 4、拉条类型
// const colorParams = {
//   cubeColor: 'skyblue'
// }
// gui
//   .addColor(colorParams, 'cubeColor')
//   .name('修改颜色')
//   .onChange((val) => {
//     cube.material.color.set(val)
//   })
</script>

<template>
  <div></div>
</template>

<style scoped></style>